<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #a9e;
      position: absolute;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
  <script>
    //获取元素
    let box = document.querySelector('.box');
    //生成随机颜色的函数
    function getRandomColor() {
      return `rgb(${_.random(0, 255)},${_.random(0, 255)},${_.random(0, 255)})`;
    }

    //封装函数, 修改元素的背景颜色为随机颜色
    function setRandomBg(el){
      el.style.background = getRandomColor();
    }

    //声明一个变量
    let leX = 0;
    let leY = 0;
    let stepX = 1;
    let stepY = 1;

    //声明定时器变量
    let timer = null;

    //为 box 元素绑定一个鼠标移入事件 on when当...时候  mouse 鼠标  over 在...之上
    box.onmouseover = function(){
      //清空定时器
      clearInterval(timer);
    }

    // out 出去
    box.onmouseout = function(){
      //再次启动定时器
      autoRun();
    }

    //声明一个函数, 启动定时器, 并运行动画
    function autoRun(){ // auto 自动  run 运行
      //启动定时器
      timer = setInterval(() => {
        //获取浏览器窗口的宽度
        let w = window.innerWidth;
        //获取浏览器窗口的高度
        let h = window.innerHeight;
        //计算 div 最大的 left
        let maxLeft = w - box.offsetWidth;
        //计算 div 最大的 top 值
        let maxTop = h - box.offsetHeight;
        //修改box元素的left
        box.style.left = leX + 'px';
        //修改 box 元素的 top 值
        box.style.top = leY + 'px';
        //判断
        if (leX >= maxLeft || leX < 0) {
          stepX = stepX * -1;
          //修改 div 的背景颜色
          setRandomBg(box);
        }
        //判断垂直方向是否越界
        if (leY >= maxTop || leY < 0) {
          stepY = stepY * -1;
          //修改 div 的背景颜色
          setRandomBg(box);
        }
        //数字自增
        leX = leX + stepX;
        //Y 周方向自增
        leY = leY + stepY;
      }, 10);
    }

    autoRun();
  </script>
</body>

</html>